<div [formGroup]="formGroup">
    <div class="form-group">
        <label for="keyDerivationSelect">Key Derivation preset</label>
        <i class="fa fa-info-circle text-primary"
           [popover]="popoverTemplate" [placement]="'bottom'" container="body" triggers="mouseenter:mouseleave"
        ></i>
        <ng-template #popoverTemplate>
            <p>
                The encryption work factor can be adjusted by this option.
            </p>
            <p>
                <code>sensitive</code> kinds of presets generally enable the highest work factor, so it's the most
                secure option from the list, but its execution takes significantly longer than other kinds of presets.
                <code>moderate</code> is in the middle and <code>interactive</code> is the least secure option, but it works faster.
            </p>
            <p>
                <code>sodium.crypto_pwhash</code> is considered as a more secure key derivation function than
                <code>node.pbkdf2</code> as it goes with the Argon2 algorithm.
            </p>
        </ng-template>
        <select class="form-control" formControlName="keyDerivation" id="keyDerivationSelect">
            <option
                *ngFor="let title of keyDerivationTitles" [value]="title">{{ title }}
            </option>
        </select>
    </div>
    <div class="form-group">
        <label for="encryptionSelect">Encryption preset</label>
        <select class="form-control" formControlName="encryption" id="encryptionSelect">
            <option
                *ngFor="let title of encryptionTitles" [value]="title">{{ title }}
            </option>
        </select>
    </div>
</div>
